<template>
  <div>
    <!-- 搜索部分 -->
    <el-card>
      <el-form ref="searchForm" :model="searchForm" inline label-width="90px;">
        <el-form-item label="学科编号">
          <el-input v-model="searchForm.rid" style="width:120px;"></el-input>
        </el-form-item>
        <el-form-item label="学科姓名">
          <el-input v-model="searchForm.name" style="width:120px;"></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input
            v-model="searchForm.username"
            style="width:120px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            style="width:130px;"
            placeholder="请选择状态"
          >
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
          <el-button @click="clear" type="default">清除</el-button>
          <el-button @click="add" type="primary">+新增学科</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表部分 -->
    <el-card style="margin-top:25px;">
      <el-table :data="subjectList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80px;">
        </el-table-column>
        <el-table-column prop="rid" label="学科编号"> </el-table-column>
        <el-table-column prop="name" label="学科名称" width="150px;">
        </el-table-column>
        <el-table-column prop="short_name" label="简称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="create_time" label="创建日期" width="180px;">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div style="color:red;" v-if="scope.row.status === 0">
              禁用
            </div>
            <div v-else>
              启用
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280px;">
          <template slot-scope="scope">
            <el-button @click="editSubject(scope.row)" type="default"
              >编辑</el-button
            >
            <el-button
              @click="changeStatus(scope.row.id)"
              v-if="scope.row.status === 0"
              type="success"
              >启用</el-button
            >
            <el-button @click="changeStatus(scope.row.id)" v-else
              >禁用</el-button
            >
            <el-button @click="deleteSubject(scope.row.id)" type="default"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:30px;text-align:center;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 增加或是修改子组件 -->
    <subject ref="subjectRef" :mode="mode" @subjectSuccess="search" />
  </div>
</template>

<script lang="ts">
// 导入子组件
import Subject from './subject-add-or-update.vue'
import { Vue, Component } from 'vue-property-decorator'
import {
  getSubjectList,
  changeSubjectStatus,
  deleteSubject
} from '@/api/subject'
@Component({
  name: 'SubjectList',
  components: {
    Subject
  }
})
export default class SubjectList extends Vue {
  declare searchForm: {
    rid: ''; // 学科编号
    name: ''; // 学科名称
    username: ''; // 创建者
    status: ''; // 状态
  }
  declare page: number
  declare limit: number
  declare total: number
  declare subjectList: any
  declare mode: string

  data() {
    return {
      searchForm: {
        rid: '', // 学科编号
        name: '', // 学科名称
        username: '', // 创建者
        status: '' // 状态
      },
      page: 1, // 当前页面
      limit: 2, // 每页多少条
      total: 0, // 总共多少条数据
      subjectList: [], // 学科列表数据
      mode: 'add' // 模式，新增或是修改
    }
  }
  created() {
    this.getSubjectListData()
  }
  // 分页查询学科列表
  async getSubjectListData() {
    const res = await getSubjectList({
      page: this.page,
      limit: this.limit,
      rid: this.searchForm.rid,
      name: this.searchForm.name,
      username: this.searchForm.username,
      status: this.searchForm.status
    })

    this.subjectList = res.data.data.items
    this.total = res.data.data.pagination.total
  }
  // 搜索
  search() {
    this.page = 1

    this.getSubjectListData()
  }
  // 清除
  clear() {
    this.searchForm.rid = ''
    this.searchForm.name = ''
    this.searchForm.username = ''
    this.searchForm.status = ''

    this.getSubjectListData()
  }
  // 每页的页码发生了改变
  handleSizeChange(val: number) {
    this.page = 1
    this.limit = val

    this.getSubjectListData()
  }
  // 每页页码发生了改变
  handleCurrentChange(val: number) {
    this.page = val

    this.getSubjectListData()
  }
  // 更改状态
  async changeStatus(id: string) {
    const res = await changeSubjectStatus({
      id: id
    })

    if (res.data.code === 200) {
      this.$message({
        type: 'success',
        message: '更改状态成功~'
      })

      this.getSubjectListData()
    }
  }
  // 新增
  add() {
    this.mode = 'add'
    ;(this.$refs.subjectRef as any).subjectForm = {
      id: '', // 学科id
      rid: '', // 学科编号
      name: '', // 学科名称
      short_name: '', // 学科简称
      intro: '', // 学科简介
      remark: '' // 备注
    }
    ;(this.$refs.subjectRef as any).dialogFormVisible = true
  }
  // 编辑
  editSubject(subject: object) {
    this.mode = 'edit'
    ;(this.$refs.subjectRef as any).subjectForm = { ...subject }
    ;(this.$refs.subjectRef as any).dialogFormVisible = true
  }
  // 删除
  deleteSubject(id: string) {
    this.$confirm('确定删除该条记录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await deleteSubject({
          id
        })

        if (res.data.code === 200) {
          this.$message.success('删除成功~')
          this.search()
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>
